<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<script src="./vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style>
	.animated-banner{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		height: 156px;
	}
	.layer{
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	.morning{
		margin-left: 100px;
	}
	.afternoon{
		margin-left: 100px;
	}
	.snowball{
		margin-left: 200px;
	}
	.evening{
		margin-left: 100px;
	}
	.window{
		margin-left: 100px;
	}
</style>
<body>
	<div id="app">
		<div class="animated-banner">
			<div class="layer">
				<img class="morning" src="https://i0.hdslb.com/bfs/vc/d324162958c6a40bd0b37eb885ce1159aebdee72.jpg"  height="156" width="2029">
			</div>
			<div class="layer">
				<img class="afternoon" src="https://i0.hdslb.com/bfs/vc/c60fe2b9198b5e5bff2a95984e6e4713d437850a.jpg"  height="156" width="2029" >
			</div>
			<div class="layer">
				<img class="snowball" src="https://i0.hdslb.com/bfs/vc/fde1b66498105fb1e578229eb0f8467ffb2af8a8.png"  height="185" width="2415"
				style="transform: scale(1) translate(40.2581px, 16.1032px) rotate(10deg);">
			</div>
			<div class="layer">
				<video id="videoID" class="evening" controls="controls" height="156" width="2029" style="object-fit: cover; opacity: 0;">
					<source src="./35e24244-ab2c-47e4-ad80-f7680991d5c1.webm" type="video/webm"/> 
				</video>	
			</div>
			<div class="layer">
				<img class="window" src="https://i0.hdslb.com/bfs/vc/988b9d12af48795d74f329aefcbc95e017ac21e4.png"  height="156" width="2029">
			</div>
			<div class="layer">
				<img src="https://i0.hdslb.com/bfs/vc/d158e27e6472ef1d9c867ae0a0b04a9ce477493f.png"  height="156" width="2029"
				style="filter:blur(2px);">
			</div>
			<div class="layer">
				<img src="https://i0.hdslb.com/bfs/vc/c73c48819e0437acbe706243766dcab2d306382c.png"  height="156" width="2029"
				style="filter:blur(2px);">
			</div>
			<div class="layer">
				<img src="https://i0.hdslb.com/bfs/vc/5d42a6a09267633ff59ce08959e30dc0dc9adcf2.png"  height="156" width="2029"
				style="opacity: 0; filter:blur(5px);">
			</div>
		</div>
	</div>
	
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
	var eve=document.getElementById('videoID');  //获取，函数执行完成后local内存释放
	eve.autoplay = true; // 自动播放
	eve.loop = true; // 循环播放
	eve.muted=true; // 关闭声音，如果为false,视频无法自动播放
	function clamp(x){
		// if(x<min) return min;
		// if(x>max) return max;
		return x/1000;
	}
	function afnop(x){
		if(850<x) return 1;
		if(x<400) return 0;
		return (x-400)/450;
	}
	function vop(x){
		if(x>1500) return 1;
		if(x<1150) return 0;
		return (x-1150)/350;
	}
	document.onmousemove = function(event){
		var x = event.pageX;
		var y = event.pageY;
		var imgs = document.getElementsByTagName("img");
		var vdeo = document.getElementsByTagName("video");
		imgs[0].setAttribute("style","filter:blur(0px); transform:translate(" + -x/20 + "px, 0px) rotate(0deg); opacity:1;");
		imgs[1].setAttribute("style","filter:blur(0px); transform:translate(" + -x/20 + "px, 0px) rotate(0deg); opacity:"+afnop(x)+";");
		imgs[2].setAttribute("style","filter:blur(0px); transform:translate(" + -x/8 + "px," + x/40 + "px) rotate(10deg); opacity:"+afnop(x)+";");
		vdeo[0].setAttribute("style","filter:blur(0px); transform:translate(" + -x/20 + "px, 0px) rotate(0deg); opacity:"+vop(x)  +";");
		imgs[3].setAttribute("style","filter:blur(0px); transform:translate(" + -x/20 + "px, 0px) rotate(0deg);");
		imgs[4].setAttribute("style","filter:blur(2px); transform:translate(" + -x/10 + "px, 0px) rotate(0deg); opacity:1;");
		imgs[5].setAttribute("style","filter:blur(2px); transform:translate(" + -x/10 + "px, 0px) rotate(0deg); opacity:"+afnop(x)+";");
		imgs[6].setAttribute("style","filter:blur(5px); transform:translate(" + -x/10 + "px, 0px) rotate(0deg); opacity:"+vop(x)  +";");
	}


	var COUNT = 300;
        var masthead = document.querySelector('.animated-banner');
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var width = masthead.clientWidth;
        var height = 156;
		console.log(width);

        var i = 0;
        var active = false;
        function onResize() {
            width = masthead.clientWidth;
            height = masthead.clientHeight;
            canvas.width = width;
            canvas.height = height;
            ctx.fillStyle = '#FFF';
            var wasActive = active;
            active = width > 600;
            if (!wasActive && active)
                requestAnimFrame(update);
        }
        var Snowflake = function () {
            this.x = 0;
            this.y = 0;
            this.vy = 0;
            this.vx = 0;
            this.r = 0;
            this.reset();
        };
        Snowflake.prototype.reset = function() {
            this.x = Math.random() * width;
            this.y = Math.random() * -height;
            this.vy = 1 + Math.random() * 3;
            this.vx = 0.5 - Math.random();
            this.r = 1 + Math.random() * 2;
            this.o = 0.5 + Math.random() * 0.5;
        };
        canvas.style.position = 'absolute';
        canvas.style.left = canvas.style.top = '0';
        var snowflakes = [], snowflake;
        for (i = 0; i < COUNT; i++) {
            snowflake = new Snowflake();
            snowflakes.push(snowflake);
        }
        function update() {
            ctx.clearRect(0, 0, width, height);
            if (!active)
                return;
            for (i = 0; i < COUNT; i++) {
                snowflake = snowflakes[i];
                snowflake.y += snowflake.vy;
                snowflake.x += snowflake.vx;
                ctx.globalAlpha = snowflake.o;
                ctx.beginPath();
                ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.fill();
                if (snowflake.y > height) {
                    snowflake.reset();
                }
            }
            requestAnimFrame(update);
        }
        // shim layer with setTimeout fallback
        window.requestAnimFrame = (function(){
            return  window.requestAnimationFrame       ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame    ||
                    function( callback ){
                        window.setTimeout(callback, 1000 / 60);
                    };
        })();
        onResize();
        window.addEventListener('resize', onResize, false);
        masthead.appendChild(canvas);
</script>
</html>